<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>N站——新闻类别</title>
    <!-- 标题栏logo -->
    <link rel="icon" href="../../image/nLogo.jpg" type="image/x-icon">
    <!-- 收藏夹里显示的logo -->
    <link rel="shortcut icon" href="../../image/nLogo.jpg" type="image/x-icon">
    <!-- layui样式 -->
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery.min.js"></script>
</head>
<body style="background: #F0F0F0;">
<!--导航栏-->
<div class="layui-row layui-panel" style=" background: #222222;">
    <div class="layui-col-md2" style="padding: 10px; text-align: center;">
        <a href="../../index.html" style="color: white; font-weight: bolder; font-size: x-large;">N站</a>
    </div>
    <ul class="layui-nav layui-col-md6" lay-filter="" style="background: #222222;">
        <li class="layui-nav-item"><a href="../../index.html">首页</a></li>
        <li class="layui-nav-item"><a href="homeNews.html">发现</a></li>
        <li class="layui-nav-item"><a href="homePublisher.html">新闻方</a></li>
        <li class="layui-nav-item layui-this"><a href="homeNewsType.html">新闻专栏</a></li>
        <li class="layui-nav-item"><a href="homeSubscribe.html">我的订阅</a></li>
        <li class="layui-nav-item"><a href="">可能感兴趣</a></li>
    </ul>
    <ul class="layui-nav layui-col-md2" style=" background: #222222;">
        <li class="layui-nav-item">
            <a><img src="../../image/avatar.jpg" class="layui-nav-img">peng_YuJun</a>
            <dl class="layui-nav-child">
                <dd style="color: white; text-align: center; background: orange">硬币：0</dd>
                <dd><a href="../self/selfData.html">个人中心</a></dd>
                <dd><a href="../publish/publishNews.html">新闻管理</a></dd>
                <dd><a href="../publish/publishRequest.html">申请成为新闻作者</a></dd>
                <dd><a href="#">退出登录</a></dd>
            </dl>
        </li>
    </ul>
    <div class="layui-nav layui-col-md2" style=" background: #222222; display: flex;align-items: center; padding: 10px;">
        <button class="layui-btn layui-btn-sm" lay-event="register">注册</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="login">登录</button>
    </div>
</div>
<!--页面主体-->
<div class="layui-fluid" style="height: 90vh; overflow-y: scroll;">
    <div class="layui-row" style="display: flex;justify-content: center; margin-top: 10px;">
        <div class="layui-col-md9">
            <div class="layui-panel" style="padding: 10px; line-height: 40px;">
                <p style="font-size: large;">新闻专栏</p>
            </div>
            <div class="layui-panel layui-row" style="padding: 10px;">
                <div class="layui-panel layui-col-md4" style="padding: 10px; display: flex; position: relative;">
                    <i class="layui-icon layui-icon-note"  style="margin-right: 50px; font-size: 30px; color: #1E9FFF;"></i>
                    <div style="line-height: 24px;">
                        <p style="font-weight: bolder;">类别1</p>
                        <p style="font-weight: lighter; font-size: smaller;">类别介绍</p>
                        <p style="font-weight: lighter; font-size: smaller;">
                            <span style="margin-right: 10px;">文章数：0</span>
                            <span>订阅数：100</span>
                        </p>
                    </div>
                    <div style="position: absolute; top: 10px;right: 10px;">
                        <button class="layui-btn layui-btn-primary">订阅</button>
                    </div>
                </div>
                <div class="layui-panel layui-col-md4" style="padding: 10px; display: flex; position: relative;">
                    <i class="layui-icon layui-icon-note"  style="margin-right: 50px; font-size: 30px; color: #1E9FFF;"></i>
                    <div style="line-height: 24px;">
                        <p style="font-weight: bolder;">类别1</p>
                        <p style="font-weight: lighter; font-size: smaller;">类别介绍</p>
                        <p style="font-weight: lighter; font-size: smaller;">
                            <span style="margin-right: 10px;">文章数：0</span>
                            <span>订阅数：100</span>
                        </p>
                    </div>
                    <div style="position: absolute; top: 10px;right: 10px;">
                        <button class="layui-btn layui-btn-primary">订阅</button>
                    </div>
                </div>
                <div class="layui-panel layui-col-md4" style="padding: 10px; display: flex; position: relative;">
                    <i class="layui-icon layui-icon-note"  style="margin-right: 50px; font-size: 30px; color: #1E9FFF;"></i>
                    <div style="line-height: 24px;">
                        <p style="font-weight: bolder;">类别1</p>
                        <p style="font-weight: lighter; font-size: smaller;">类别介绍</p>
                        <p style="font-weight: lighter; font-size: smaller;">
                            <span style="margin-right: 10px;">文章数：0</span>
                            <span>订阅数：100</span>
                        </p>
                    </div>
                    <div style="position: absolute; top: 10px;right: 10px;">
                        <button class="layui-btn layui-btn-primary">订阅</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['util', 'layer','form','element'], function(){
        var element = layui.element
            ,util = layui.util;

        util.event('lay-event',{
            login : function (){
                window.location.href = "../user/userLogin.html";
            },
            register: function (){
                window.location.href = "../user/userRegister.html";
            }
        })
    });
</script>
</html>
